<template>
	<div class="home">
		<div class="header"
		     @click="headerClick()">
			我是头
		</div>
		<pull-loader class="body"
		             :usepulldown='true'
		             :usepullup='true'
		             :pullDownDistance="70"
		             @on-pulldown-loading="refresh()"
		             @on-pullup-loading="loadmore()"
		             ref="scrollbox">
			<div>琵琶行</div>
			<address>作者：白居易</address>
			<p v-for="m in num"
			   :key="m">
				浔阳江头夜送客，枫叶荻花秋瑟瑟。<br />
				座中泣下谁最多？江州司马青衫湿。
			</p>
		</pull-loader>
		<div class="footer"
		     @click="footClick()">
			我是脚
		</div>
	</div>
</template>

<script>
import pullLoader from '@/components/pullLoader.vue';

export default {
  name: 'home',
  components: {
    pullLoader,
  },
  data() {
    return {
      num: 3,
      nomore: false,
    };
  },
  methods: {
    headerClick() {
      this.$dialog.prompt('确定吗？', (res) => {
        console.log(res);
        return true;
      });
      // this.$dialog.confirm('确定吗？', () => {
      //   console.log('ok');
      //   return true;
      // });
    },
    footClick() {
      this.$dialog.custom({ title: '自定义', msg: 'confirm测试', buttons: ['btn1', 'btn2', 'btn3', 'btn4'] }, (index) => {
        console.log(index);
        if (index === 3) {
          return true;
        }
        return false;
      });
    },
    refresh() {
      this.$store.commit('showLoading');
      setTimeout(() => {
        this.num = parseInt(Math.random() * 10, 10);
        if (this.num < 5) this.$refs.scrollbox.loadmoreClose();
        this.$refs.scrollbox.loadingComplete();
        this.$store.commit('hideLoading');
      }, 2000);
    },
    loadmore() {
      this.$store.dispatch('showToast', { text: '加载数据' });
      setTimeout(() => {
        this.num += parseInt(Math.random() * 10, 10) + 1;
        if (this.num > 20) this.$refs.scrollbox.loadmoreClose();
        this.$refs.scrollbox.loadingComplete();
        this.$store.dispatch('showToast', { text: '加载完成', type: 'success' });
      }, 1000);
    },
  },
};
</script>
<style lang="less">
.header {
	width: 100%;
	height: 3rem;
	background-color: #1177cc;
	color: @color;
}
.body {
	width: 100%;
	height: calc(100vh - 6rem);
}
.footer {
	width: 100%;
	height: 3rem;
	background-color: #1177cc;
}
</style>
